<template>
  <uni-popup ref="popupRef" type="bottom">
    <view class="date-picker-container">
      <!-- 标题 -->
      <view class="picker-header">
        <text class="picker-title">选择日期</text>
      </view>

      <!-- 变动时间 -->
      <view class="date-inputs">
        <text class="date-label">变动时间</text>
        <view class="date-input-row">
          <view
            class="date-input"
            :class="{ active: isSelectingStart }"
            @click="focusStartDate"
          >
            <text class="date-input-text">{{ startDate }}</text>
          </view>
          <text class="date-separator">—</text>
          <view
            class="date-input"
            :class="{ active: !isSelectingStart }"
            @click="focusEndDate"
          >
            <text class="date-input-text">{{ endDate }}</text>
          </view>
        </view>
      </view>

      <!-- 日期选择器 -->
      <view class="picker-wrapper">
        <picker-view
          :value="pickerValue"
          @change="handlePickerChange"
          class="picker-view"
          :indicator-style="indicatorStyle"
        >
          <picker-view-column>
            <view v-for="item in years" :key="item" class="picker-item">
              {{ item }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="item in months" :key="item" class="picker-item">
              {{ item }}月
            </view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="item in days" :key="item" class="picker-item">
              {{ item }}日
            </view>
          </picker-view-column>
        </picker-view>
      </view>

      <!-- 底部按钮 -->
      <view class="picker-footer">
        <view class="picker-button reset-button" @click="handleReset">
          <text>重置</text>
        </view>
        <view class="picker-button confirm-button" @click="handleConfirm">
          <text>确认</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from "vue";

const emit = defineEmits(["confirm", "reset"]);

const popupRef = ref(null);

// 日期数据
const startDate = ref("2025-10-01");
const endDate = ref("2025-10-31");

// 当前选择的是开始日期还是结束日期
const isSelectingStart = ref(true);

// 日期选择器数据
const years = ref([]);
const months = ref([]);
const days = ref([]);
const pickerValue = ref([0, 0, 0]);

// 临时选择的日期
const tempYear = ref(2025);
const tempMonth = ref(10);
const tempDay = ref(1);

// picker-view 指示器样式
const indicatorStyle = ref("height: 68rpx;");

// 初始化日期选择器数据
const initPickerData = () => {
  // 年份：2022-2025
  years.value = [2022, 2023, 2024, 2025];

  // 月份：1-12
  months.value = Array.from({ length: 12 }, (_, i) => i + 1);

  // 更新天数
  updateDays();
};

// 更新天数
const updateDays = () => {
  const daysInMonth = new Date(tempYear.value, tempMonth.value, 0).getDate();
  days.value = Array.from({ length: daysInMonth }, (_, i) => i + 1);
};

// 打开弹框
const open = (start = "2025-10-01", end = "2025-10-31") => {
  startDate.value = start;
  endDate.value = end;

  // 解析开始日期
  const [year, month, day] = start.split("-").map(Number);
  tempYear.value = year;
  tempMonth.value = month;
  tempDay.value = day;

  // 设置选择器位置
  const yearIndex = years.value.indexOf(year);
  const monthIndex = month - 1;
  const dayIndex = day - 1;

  pickerValue.value = [yearIndex, monthIndex, dayIndex];

  // 默认选择开始日期
  isSelectingStart.value = true;

  popupRef.value?.open();
};

// 关闭弹框
const close = () => {
  popupRef.value?.close();
};

// 切换选择开始日期
const focusStartDate = () => {
  isSelectingStart.value = true;

  // 解析开始日期
  const [year, month, day] = startDate.value.split("-").map(Number);
  tempYear.value = year;
  tempMonth.value = month;
  tempDay.value = day;

  updateDays();

  // 设置选择器位置
  const yearIndex = years.value.indexOf(year);
  const monthIndex = month - 1;
  const dayIndex = day - 1;

  pickerValue.value = [yearIndex, monthIndex, dayIndex];
};

// 切换选择结束日期
const focusEndDate = () => {
  isSelectingStart.value = false;

  // 解析结束日期
  const [year, month, day] = endDate.value.split("-").map(Number);
  tempYear.value = year;
  tempMonth.value = month;
  tempDay.value = day;

  updateDays();

  // 设置选择器位置
  const yearIndex = years.value.indexOf(year);
  const monthIndex = month - 1;
  const dayIndex = day - 1;

  pickerValue.value = [yearIndex, monthIndex, dayIndex];
};

// 处理选择器变化
const handlePickerChange = (e) => {
  const [yearIndex, monthIndex, dayIndex] = e.detail.value;

  tempYear.value = years.value[yearIndex];
  tempMonth.value = months.value[monthIndex];

  // 更新天数
  updateDays();

  // 如果选择的天数超出当月最大天数，调整为最大天数
  if (dayIndex >= days.value.length) {
    tempDay.value = days.value[days.value.length - 1];
  } else {
    tempDay.value = days.value[dayIndex];
  }
};

// 重置
const handleReset = () => {
  startDate.value = "2025-10-01";
  endDate.value = "2025-10-31";

  close();

  emit("reset", {
    startDate: startDate.value,
    endDate: endDate.value,
  });
};

// 确认
const handleConfirm = () => {
  const year = tempYear.value;
  const month = String(tempMonth.value).padStart(2, "0");
  const day = String(tempDay.value).padStart(2, "0");
  const selectedDate = `${year}-${month}-${day}`;

  if (isSelectingStart.value) {
    startDate.value = selectedDate;
  } else {
    endDate.value = selectedDate;
  }

  close();

  emit("confirm", {
    startDate: startDate.value,
    endDate: endDate.value,
  });
};

// 初始化
initPickerData();

// 暴露方法
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
// 日期选择器弹框
.date-picker-container {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 30rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.picker-header {
  text-align: center;
  margin-bottom: 32rpx;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
}

// 日期输入框
.date-inputs {
  margin-bottom: 32rpx;
}

.date-label {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.date-input-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.date-input {
  flex: 1;
  height: 80rpx;
  background-color: #fff;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;

  &:active {
    opacity: 0.8;
  }

  &.active {
    border-color: #fabc02;
  }
}

.date-input-text {
  font-size: 28rpx;
  color: #333;
}

.date-separator {
  font-size: 28rpx;
  color: #999;
}

// picker-view 容器
.picker-wrapper {
  margin-bottom: 32rpx;
}

.picker-view {
  height: 400rpx;
  width: 100%;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68rpx;
  font-size: 28rpx;
  color: #333;
}

// 底部按钮
.picker-footer {
  display: flex;
  gap: 20rpx;
}

.picker-button {
  flex: 1;
  height: 80rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;

  &:active {
    opacity: 0.8;
  }
}

.reset-button {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-button {
  background-color: #ff9900;
  color: #fff;
}
</style>
